<!DOCTYPE html>
<html>
  <head>
<title>EC2 Bandwidth Monitor - WebSocket & Node.JS Test Page</title>
<style type="text/css">
#io_0,#io_1,#io_2 {background: blue; color: white; padding: 5px; }
#io_3,#io_4,#io_5 {background: green; color: white; padding: 5px; }
#io_6,#io_7,#io_8 {background: red; color: white; padding: 5px; }

.montable {width: 600px; }
#out_summary { width: 600px; border: #EEEEEE solid 1px; background: #E7E7E7 }

#rx {background: blue; color: white; padding: 5px; }
#tx {background: green; color: white; padding: 5px; }
</style>
<script src="jquery-1.5.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<h2>VPS Mon - for EC2 (WebSocket & Node.JS)</h2>

<h3>Current Traffic</h3>
<table class="montable">
<thead><td>rx</td><td>tx</td></thead>
<tbody id="out_realtime"></tbody>
</tr>
</table>


<h3>System Usage</h3>
<table class="montable">
<thead><td>disk</td><td>mem</td><td>network</td></thead>
<tbody id="summary"></tbody>
</tr>
</table>

<h3>Network History</h3>
<div id="out_summary"></div>

<form id="msgForm" style="display: none;">
<input size=50 type="text" id="inputMessage" value="Hello" ><button
id="sendButton">Send</button>
</form>

<pre id="output"></pre>

<a href="http://nodejs.org" target="_blank"><img src="nodejs_logo-1.png" border=0/></a>
<br/>
powered by <a href="http://cnodejs.org" target="_blank">cnodejs.org</a>

<script>

var output = $("#output");

var log = function(s) {
    if (document.readyState !== "complete") {
        log.buffer.push(s);
    } else {
	output.prepend(s+"\n");
    }
}
log.buffer = [];
var hostname = location.hostname;
var port = location.port;
url = "ws://"+hostname+":"+port+"/echo";
w = new WebSocket(url);
w.onopen = function() {
    log("open");
    w.send("thank you for the request");
}
w.onmessage = function(e) {
	var msg = e.data;
	var body = "";
	if(msg.match(/#mon_realtime:::/)) {
		msg = msg.split(":::")[1];
		if(msg.indexOf("rx")==0) {
			var  a = msg.split(" ");
			body += "<td id='rx'>"+a[1]+" "+a[2]+"</td>";
			body += "<td id='tx'>"+a[6]+" "+a[7]+"</td>";
			$("#out_realtime").html(body);
		}
	}
	else if(msg.match(/#mon_summary:::/)) {
		msg = msg.split(":::")[1];
		//msg = msg.replace("\n","<br>");
		$("#out_summary").append("<pre>"+msg+"</pre>");
	}
	else if(msg.match(/#mon_usage:::/)) {
		var monarr = msg.split(":::")[1].split(" ");
		var disk = monarr[3];
		var mem = monarr[5]; 
		var network = monarr[7];
		var network_p = 100*network/(1024*30);
		network_p = network_p.toFixed(4)
		body += "<td id='io_1'>"+disk+"%</td>"
		body += "<td id='io_4'>"+mem+"%</td>"
		body += "<td id='io_7'>"+network_p+"% ("+network+"M bytes of 30G/Month)</td>"
		$("#summary").html(body);
	}
	else if(msg.match(/#mon/)) {
		var monarr = msg.split(":")[1].split(" ");
		for(var item in monarr) {
			body += "<td id='io_"+item+"'>"+monarr[item]+"</td>"
		}
		$("#iobody").html(body);
		//log(monarr[0]);
		
	}
	else
    	log(e.data);
}
w.onclose = function(e) {
    log("closed");
}
function sendMessage() {
	w.send($("#inputMessage").val());
}
window.onload = function() {

    log(log.buffer.join("\n"));
    $("#msgForm").submit(function(){
    		event.preventDefault();
    		sendMessage();
    		$("#inputMessage").val("");
	})
}
</script>

</body>
</html>
